今天統整一下基礎知識
注意事項

• 在 vue 3.x 如果用 option API 的話 data 屬性統一使用 function 形式， data(){},
• style 沒有放 在 codesandbox 會有問題

使用原始範例

https://codesandbox.io/s/vue-3-shi-yong-props-emit-shi-xian-v-model-ekk42?file=/src/App.vue:0-555

改成以下

https://codesandbox.io/s/props-emit-vs2n1r?file=/src/App.vue

Vue2寫法

<template>
  <h1>爸爸</h1>
  {{ msg }}
  <br />
  <h3>兒子</h3>
  <Child v-model="msg" />
  <!-- 等同於 -->
  <!-- <Child :modelValue="msg" @update:modelValue="msg = $event" /> -->
</template>


<script>
import Child from "@/components/Child.vue";
export default {
  name: "App",
  components: {
    Child,
  },
  data() {
    return {
      msg: "爸爸傳給兒子，兒子再傳給爸爸，達到同步",
    };
  },
};
</script>

<style>
</style>

<template>
  <input
    type="text"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script>
export default {
  props: ["modelValue"],
};
</script>

<style>
</style>

Vue3寫法

<template>
  <h1>爸爸</h1>
  {{ msg }}
  <br />
  <h3>兒子</h3>
  <Child v-model="msg" />
  <!-- 等同於 -->
  <!-- <Child :modelValue="msg" @update:modelValue="msg = $event" /> -->
</template>

<script>
import { ref } from "vue";
import Child from "@/components/Child.vue";
export default {
  name: "App",
  components: {
    Child,
  },
  setup() {
    const msg = ref("爸爸傳給兒子，兒子再傳給爸爸，達到同步");
    return { msg };
  },
};
</script>

<style>
</style>

<template>
  <input
    type="text"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script>
export default {
  props: ["modelValue"],
};
</script>

<style>
</style>

補充

如果要使用 vue 3.2 的 script setup 語法糖如何定義 name
https://stackoverflow.com/questions/67669820/how-to-define-component-name-in-vue3-setup-tag

參考rfc
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md#declaring-additional-options

原本想在 codesandbox 測試 vue3.2 setup 語法糖
但是一直有問題跑不起來
有找到官方範例

原始文章:
https://cn.vuejs.org/guide/components/events.html#usage-with-v-model

有興趣的讀者可以看看官方文件
https://vuejs.org/api/sfc-script-setup.html
差異蠻大的